<template>
  <div class="card_w_h">
    <!--卡片头部-->
    <div class="card_heard">
      <p class="mcht">
        <span class="mcht_name">{{couponInfo.mchtName}}</span>
        <span class="mcht_location">{{couponInfo.mchtArea}}{{couponInfo.distance | setDistance}}</span>
      </p>
    </div>
    <!--这是卡片信息-->
    <div class="coupon_detail_wrp" @click.prevent="goCouDeatil(couponInfo)">
      <span class="coupon_case cash" v-if="couponInfo.couponType === 'cash' ">代金券</span>
      <span class="coupon_case rebate" v-if="couponInfo.couponType === 'rebate' ">折扣券</span>
      <span class="coupon_case voucher" v-if="couponInfo.couponType === 'voucher' ">抵用券</span>
      <img class="coupon_img" v-lazy="couponInfo.mchtLogUrl" alt="图片">
      <div class="card-info-detail">
        <strong class="card-info_title">{{couponInfo.couponName | sliceString(9)}}</strong>
        <div class="card_info_type">
          <p class="type">
            <span class="type_name">{{couponInfo.mchtType}}</span>
            <star :couponComScore="couponInfo.couponComScore" class="type_star_left"></star>
            <span class="type_comment">{{couponInfo.couponComNum}}条</span>
          </p>
          <!--显示券值多少芸券-->
          <div class="coupon_type_num">
            <p class="type_num">{{couponInfo.valuation}}</p>
            <span class="type_num_label">芸券</span>
          </div>
        </div>
        <p class="use-info-sold">
          <span>面值</span>
          <span class="couponNum" v-if="couponInfo.couponType !== 'rebate'">&nbsp;¥{{couponInfo.denomination}}元</span>
          <span class="couponNum" v-else>&nbsp;{{couponInfo.denomination}}折</span>
        </p>
      </div>
    </div>
    <!--卡片的尾部-->
    <div class="card_foot">
      <img v-lazy="couponInfo.usrPicUrl" alt="头像">
      <span class="font">{{couponInfo.usrName}}</span>
      <div class="card_progress_bar">
        <div class="bar">
          <div class="bar2" :style="radiusProgress"></div>
        </div>
        <span>已出售 {{couponInfo.soldnum}}</span>
        <span>&nbsp;&nbsp;&nbsp;库存 {{couponInfo.sellNum}} 张</span>
      </div>
      <button type="button" class="card_foot_button" @click="goChoosePage(couponInfo)">立即兑换</button>
    </div>
    <slot></slot>
  </div>
</template>

<script>
  import star from 'src/componentes/global/star.vue';
  import {Storage} from 'src/utils/storage'
  import getData4 from 'src/service/getData4'

  export default {
    props: {
      couponInfo: {
        default: () => {}
      }
    },
    data: () => ({}),
    mounted() {
      this.$nextTick(_ => {

      })
    },
    computed: {
      radiusProgress() {
        // 返回进度条宽度百分比
        return 'width:' + (1 - (+this.couponInfo.sellNum / ((+this.couponInfo.soldnum) + (+this.couponInfo.usednum)))).toFixed(4) * 100 + '%';
      }
    },
    methods: {
      goCouDeatil(info) { // 跳转券和商户详情页面
        this.$store.commit('changeState', true);
        Storage.set('couponInfo', info, false);
        this.$router.push({
          name: 'couDetail',
          query: {
            seq: info.seqNo || info.id || '',
            couponId: info.couponId || '',
            mchtId: info.mchtId,
            usrPicId: info.usrPicId || '',
            usrId: info.usrId || '',// 挂单用户ID
          }
        });
      },
      async goChoosePage(info) { //赋值，跳转兑换券页面
        this.$store.commit('changeState', true);
        Storage.set('couponInfo', info, false);
        getData4.findSeqno({couponId: info.couponId, mchtId: info.mchtId}).then(data => {
          if (data.content.list.length) {
            this.$router.push({
              path: "/exchange"
            });
          } else {
            this.$router.push({
              name: 'couDetail',
              query: {
                seq: info.seqNo || info.id || '',
                couponId: info.couponId || '',
                mchtId: info.mchtId,
                usrPicId: info.usrPicId || '',
                usrId: info.usrId || '',// 挂单用户ID
              }
            });
          }
        })
      }
    },
    components: {star}
  }
</script>

<style lang="scss" scoped="">
  .card_w_h {
    .coupon_detail_wrp {
      display: inline-block;
      position: relative;
      border-top: 1px dashed #f5f5f5;
      border-bottom: 1px dashed #f5f5f5;
      margin-left: 1.2rem;
      padding: 1.43rem 0 1.43rem 0;
      width: 92%;
      span.coupon_case {
        position: absolute;
        top: 2rem;
        left: -0.3rem;
        color: #fefefe;
        border-radius: 2px;
        font-size: 0.625rem;
        text-align: center;
        width: 2.8rem;
        height: 1.25rem;
        display: flex;
        align-items: center; /* 垂直居中 */
        justify-content: center; /* 水平居中 */
        z-index: 99;
      }
      .cash {
        background-color: #f59f06;
      }
      .voucher {
        background-color: #72aec5;
      }
      .rebate {
        background-color: #77bd6c;
      }
    }
    img.coupon_img {
      width: 5.72rem;
      height: 5.72rem;
      margin: 0;
    }
    .card_heard {
      width: 100%;
      height: 3.9rem;
      border-radius: 5px;
      p {
        color: #666666;
        &.mcht {
          line-height: 3.9rem;
          span.mcht_name {
            font-size: 0.9rem;
            margin-left: 1.2rem;
          }
          span.mcht_location {
            float: right;
            font-size: 0.8rem;
            margin-right: 1.2rem;
          }
        }
      }
    }
    .card-info-detail {
      float: left;
      margin-left: 0.6rem;
      .card-info_title {
        float: left;
        font-size: 1.1rem;
        margin-left: 0.1rem;
        white-space: nowrap;
        overflow: hidden;
        color: #444444;
        width: 100%;
      }
      .card_info_type {
        margin: 1.8rem 0 1.4rem 0;
        & .type {
          span.type_name {
            font-size: 0.75rem;
            float: left;
            margin-right: 0.6rem;
            margin-top: 0.2rem;
            color: #666666
          }
          span.type_star_left {
          }
          span.type_comment {
            font-size: 0.75rem;
            color: #666666;
            margin-left: 0.6rem;
          }
        }
        div.coupon_type_num {
          position: absolute;
          right:0;
          top: 40%;
          /*width: 480px;*/
          text-align: center;
          transform: translate(0, -50%);
          -weblit-transform: translate(0, -50%);
          p.type_num {
            color: #ed588f;
            width: 5rem;
            font-size: 1.9rem;
            text-align: center;
            font-weight: 500;
          }
          span.type_num_label {
            position: absolute;
            left: 50%;
            font-size: 0.7rem;
            min-width: 2rem;
            transform: translate(-50%, 0);
            -weblit-transform: translate(-50%, 0);
            width: 100%;
            color:#666666;
            text-align: center;
          }
        }
      }
      .paValue {
        float: left;
        font-size: .8rem;
        line-height: 2rem;
        margin-left: 0.5rem;
        font-weight: 400;
        color: #7d7d7d;
        span.sum {
          margin-left: 20px;
          color: #ef3b5d;
        }
      }
      .use-info-sold {
        font-size: 0.8rem;
        margin-left: 0.1rem;
        span {
          font-size: 1rem;
          font-weight: 300;
          color: #666666
        }
        .couponNum {
          font-size: 1rem;
          color: #ee3155;
        }
      }
    }
    .card_foot {
      position: relative;
      top: -0.2rem;
      height: 2.758rem;
      line-height: 2.875rem;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      img {
        width: 1.25rem;
        height: 1.25rem;
        margin-left: 1rem;
        margin-top: 0.8rem;
      }
      .font {
        position: relative;
        font-size: 0.8rem;
        color: #787878;
        top: -0.25rem;
      }
      div.card_progress_bar {
        position: absolute;
        top: 0.7rem;
        left: 7.55rem;
        font-size: 0.8rem;
        .bar {
          width: 7.75rem;
          height: 0.32rem;
          border: 1px solid #ffc2cd;
          border-radius: 10px;
          div.bar2 {
            margin-top: -0.8px;
            height: 0.3rem;
            border-radius: 10px;
            background-color: #ffc2cd;
          }
        }
        span {
          position: relative;
          top: -0.5rem;
          color: #787878;
        }
      }

      button.card_foot_button {
        float: right;
        width: 5.625rem;
        height: 2rem;
        font-size: 0.95rem;
        border-radius: 5px;
        color: #ffffff;
        margin: 0.5rem 0.85rem;
        background-color: #ec4e8a;
      }
    }
  }
</style>